<template>
    <div class="main_top_menu minw" style="background: transparent;">
        <div class="search">
            <router-link tag="a" to="/search" active-class="active" href="javascript:void(0);" class="db it1 bgfff80 round30 mr15">
                <div>
                    <img src="../../assets/img/search-icon.png" class="searchimg dib ml15" alt="">
                     <span class="dib ft12 c666">海洋之星五折起购</span>
                </div>
            </router-link>
            <p class="rela">
                <router-link tag="a" to="/message" active-class="active" href="javascript:void(0);">
                    <span class="mess1 mt3"></span>
                </router-link>
            </p>
        </div>

        <div class="scroll-nav  pt5 dscroll">
            <div class="scroll-block rela dscroll-div" style="width:100%;">
                <ul class="brands-list clearfix dscroll-ul">
                    <li class="dscroll-li ftc" style="width: 20%;">
                        <div class="ft20 bold flex flex-ae">
                            <span class="ct">精选</span>
                        </div>
                    </li>
                    <li class="dscroll-li ftc" style="width: 20%;">
                        <div>
                            <span class="ct">潮品</span>
                        </div>
                    </li>
                    <li class="dscroll-li ftc" style="width: 20%;">
                        <div>
                            <span class="ct">进口</span>
                        </div>
                    </li>
                    <li class="dscroll-li ftc" style="width: 20%;">
                        <div>
                            <span class="ct">公益</span>
                        </div>
                    </li>
                    <li class="dscroll-li ftc" style="width: 20%;">
                        <div>
                            <span class="ct">口碑</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus" scoped>
.main_top_menu
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    max-width: 7.5rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    .scroll-nav-list 
        display flex
        height 0.44rem
        text-align center
        line-height 0.44rem
        white-space nowrap
        li.ct
            margin auto
            font-size .2rem
        li 
            flex 1
            height 0.44rem
    .search
        height 0.3rem
        margin-top 0.25rem 
        display flex
        padding: 0 .15rem
.bgfff80 {
    background: rgba(255,255,255,0.8);
}        

.round30 {
    border-radius: 0.3rem;
}
.it1
    display block
    -webkit-box-flex: 1;
    flex: 1;
.mr15 {
    margin-right: 0.15rem;
}
.minw {
    min-width: 3.2rem;
}
.bgfff80 {
    background: rgba(255,255,255,0.8);
}
.searchimg {
    width: 0.1rem;
}
.dib {
    display: inline-block;
}
.ml15 {
    margin-left: 0.15rem;
}
.c666 {
    color: #666;
}
.dib {
    display: inline-block;
}
.ft12 {
    font-size: 0.12rem;
}
.rela
    position relative
.mess1 {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    background: url("../../assets/img/message.png") no-repeat;
    background-size: 100% 100%;
}
.mt3 {
    margin-top: 0.03rem;
}
.scroll-nav {
    min-width: 3.2rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.pt5 {
    padding-top: 0.05rem;
}
.scroll-nav ul {
    white-space: nowrap;
    height: 0.44rem;
    line-height: 0.44rem;
}
.scroll-nav li{
    width: 33%;
    float: left;
    font-size: 0.14rem;
}
.ftc {
    text-align: center;
}
.flex-ae {
    -webkit-box-align: end;
    align-items: flex-end;
}
.flex
    display flex
.ft20 {
    font-size: 0.2rem;
}
.bold {
    font-weight: 700;
}
.ct
    margin auto
    color #ffffff
</style>